<template>
  <el-dialog
    :title="title"
    :model-value="visible"
    :before-close="onClose"
    append-to-body
    :width="width + 'px'"
    >
    <!-- 内容区域，使用默认插槽 -->
    <slot>
      <!-- 如果父组件未提供内容，则显示默认内容 -->
      这里是默认内容
    </slot>

    <!-- 底部按钮区域，使用具名插槽 footer -->
    <template #footer>
      <slot name="footer">
        <el-button type="danger" @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
//
interface DialogProps{
    title:string,
    visible:boolean,
    width:number,
    height:number
}
//设置弹框默认值
const props = withDefaults(defineProps<DialogProps>(), {
  title: '标题',
  visible:false,
  width:600,
  height:250
});

const emit = defineEmits(["onClose", "onConfirm"]);
//定义弹框的关闭
const onClose = () => {
  emit("onClose");
};
//定义弹框的确定
const onConfirm = () => {
  emit("onConfirm");
};

</script>

<style scoped>

</style>